<template>
	<div class="home-content custom-scrollbar">
		<el-row :gutter="20" style="width: 100%;">
			<el-col :span="6">
				<div class="grid-header system-user">
					<div>系统用户</div>
					<el-divider direction="vertical"></el-divider>
					<div>99+</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-header project-team">
					<div>项目团队</div>
					<el-divider direction="vertical"></el-divider>
					<div>99+</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-header good-template">
					<div>优秀模板</div>
					<el-divider direction="vertical"></el-divider>
					<div>108</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-header today-visit">
					<div>今日访问</div>
					<el-divider direction="vertical"></el-divider>
					<div>668</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" style="width: 100%;">
				<!-- <video :autoplay="true" src="https://project-doc-module.oss-cn-beijing.aliyuncs.com/%E9%98%9F%E5%8F%8B%E5%9C%A8%E7%BA%BF.mp4?Expires=1591348743&OSSAccessKeyId=TMP.3KffYbu4DMQXubLVJfyHeL9Zy6UMEbmmwGd8qeeiz6zawBQEitob1NSpQ9qwhhdgid4Npr5QoPgXbzuGmy4npeT9H7rhMi&Signature=rnyQS4F1TahLz5Mz65moLzm9TXg%3D" controls></video> -->
				<el-carousel indicator-position="outside" class="my-carousel">
				    <el-carousel-item>
				      <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-partneronlinedocadmin/94a783b0-a706-11ea-b94e-47f67ecf8268.jpg" lazy-load></image>
				    </el-carousel-item>
					<el-carousel-item>
					  <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-partneronlinedocadmin/94bf0350-a706-11ea-b94e-47f67ecf8268.jpg" lazy-load></image>
					</el-carousel-item>
					<el-carousel-item>
					  <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-partneronlinedocadmin/94bd7cb0-a706-11ea-a30b-e311646dfaf2.jpg" lazy-load></image>
					</el-carousel-item>
					<el-carousel-item>
					  <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-partneronlinedocadmin/94a1de60-a706-11ea-b244-a9f5e5565f30.jpg" lazy-load></image>
					</el-carousel-item>
				  </el-carousel>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				
			}
				
		},
		computed: {
			...mapState(['relevanceUserID'])
		},
		created() {
			// console.log(uni.getStorageSync('relevanceUserID'));
			// console.log(this.relevanceUserID);
		},
		methods: {
		
		}
	}
</script>
<style lang="scss">
	.home-content {
		height: 100%;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-header {
		height: 80px;
		border-radius: 10px;
		@include f-ai-jc(flex, center, center)
		div{
			color:#FFFFFF;
			&:first-child{
				font-size:$uni-font-size-extra-large;
				height:60px;
				padding:0 20px;
				line-height:60px;
			}
			&:last-child{
				font-size:$uni-font-size-base;
			}
		}
	}
	.system-user{
		background: #c23531;
	}
	.project-team{
		background: #61a0a8;
	}
	.good-template{
		background: #dc9981;
	}
	.today-visit{
		background: #91c7ae;
	}

	.my-carousel{
		margin-top: 40px;
		height: 400px;
	}
	.el-carousel__item{
		height: 400px;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
